<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板</title>
    <style>
      .active {
        background: red;
      }
      a {
        margin-right: 20px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p>
        <!-- 6.配置导航:声明式导航和编程式导航都可以 -->
        <!-- 声明式导航 -->
        <!-- <a href="#/">主页</a> -->
        <a
          :href="item.path"
          v-for="(item, index) in navList"
          :key="item.id"
          :class="{active:currentIndex == index}"
          @click="currentIndex=index"
          >{{ item.title }}</a
        >
        <!-- <a href="#/list">列表页</a>
        <a href="#/cart">购物车</a> -->
      </p>
      <div>
        <!-- 7.设置路由出口：系统组件 -->
        <router-view />
      </div>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <!-- 1.安装vue-router： npm i vue-router -S -->
  <!-- 2.引入vue-router -->
  <script src="../node_modules/vue-router/dist/vue-router.js"></script>
  <script>
    //   3.准备好子组件
    let appHome = {
      template: "<h1>首页内容</h1>",
    };

    let appList = {
      template: "<h1>列表页内容</h1>",
    };

    let appCart = {
      template: "<h1>购物车内容</h1>",
    };

    // 4.配置路由表
    let router = new VueRouter({
      //   mode: "hash",
      routes: [
        {
          path: "/home",
          component: appHome,
        },
        {
          path: "/",
          redirect: "/home", //重定向
        },
        {
          path: "/list",
          component: appList,
        },
        {
          path: "/cart",
          component: appCart,
        },
      ], //配置路由表
    });

    new Vue({
      el: "#app",
      data: {
        navList: [
          {
            id: 1,
            path: "#/home",
            title: "主页",
          },
          {
            id: 2,
            path: "#/list",
            title: "列表页",
          },
          {
            id: 3,
            path: "#/cart",
            title: "购物车页",
          },
        ],
        currentIndex: 0,
      },
      router, //5.把router注入到vue里面
    });
  </script>
</html>
